<script lang="ts" setup>
	//营销页面
	import { ref } from "vue";
	import marketingCard from '@/components/marketing-card.vue'
	import gysMarketingCard from '@/components/gys-marketing-card/gys-marketing-card.vue'
	import DaDropdown from '@/components/da-dropdown/index.vue'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	let router = useRouter()
	const {
		proxy,
	} = getCurrentInstance()
	const routerLink = (name) => {
		uni.$on('deleteRefash', (e) => {
			marketList.value = []
			marketPage.value = 1
			getMarketList()
			uni.$off('deleteRefash')
		})
		//路由管理
		router.push({
			name,
			params: {
				data: JSON.stringify(pageObj.value)
			}
		})
	}
	const deleteWatch = () => {
		console.log('监听删除');
		uni.$on('deleteRefash', (e) => {
			marketList.value = []
			marketPage.value = 1
			getMarketList()
			uni.$off('deleteRefash')
		})
	}
	onShow(() => {
		uni.$off('deleteRefash')
	})
	onUnload(() => {
		uni.$off('deleteRefash')
	})
	let pageObj = ref({})
	onLoad((options) => {
		console.log(options);
		pageObj.value = JSON.parse(options.data)
		getScreen()
	})
	onReachBottom(() => {
		marketPage.value++
		getMarketList()
	})
	const getScreen = () => {
		//获取分类
		proxy.$req('GET', proxy.$api.marketScreen, {
			id: pageObj.value.id
		}).then((res) => {
			console.log(res, 'res');
			tabsList1.value = res.result
			tabObj.value = tabsList1.value[0]
			getMarketList()
		})
	}
	const DaDropdownRef = ref()
	const dropdownMenuList = ref([
		{
			title: '点赞量',
			type: 'sort',
			prop: 'like',
		},
		{
			title: '收藏量',
			type: 'sort',
			prop: 'collect',
		},
		{
			title: '浏览量',
			type: 'sort',
			prop: 'view',
		},
	])
	const handleConfirm = (v) => {
		//点击筛选
		marketPage.value = 1
		marketList.value = []
		console.log(v);
		let key = Object.keys(v)[0]
		sortType.value = key
		if (!v[key]) {
			orderByType.value = ''
			sortType.value = ''
		} else {
			orderByType.value = v[key].toUpperCase()
		}
		dropdownMenuList.value.forEach((item, index, arr) => {
			console.log(item);
			if (key !== item.prop) {
				//value是控制箭头状态
				//isActived是控制文字状态
				delete dropdownMenuList.value[index].value
				delete dropdownMenuList.value[index].isActived
			}
		})
		getMarketList()
	}
	const handleClose = (v) => {
		// console.log('handleClose ==>', v)
	}
	const handleOpen = (v) => {
		// console.log('handleOpen ==>', v)
	}
	const searchGo = () => {
		//点击搜索
		router.push({
			name: 'marketSearch',
			params: {
				type: 'marketing',
				data: JSON.stringify(pageObj.value)
			}
		})
	}
	let marketPage = ref(1)
	let tabsList1 = ref([])
	let tabObj = ref({})
	let orderByType = ref('')
	let sortType = ref('')
	let marketList = ref([])
	const tabChange = (e) => {
		marketPage.value = 1
		marketList.value = []
		//切换分类
		tabObj.value = e
		getMarketList()
	}
	const getMarketList = () => {
		let url;
		if (userStoreInfo.userFlag == 2) {
			url = proxy.$api.marketList
		} else {
			url = proxy.$api.marketList2
		}
		proxy.$req('GET', url, {
			pageNo: marketPage.value,
			pageSize: 15,
			id: tabObj.value.id,
			vendorId: userStoreInfo.userInfo.supplier.id ? userStoreInfo.userInfo.supplier.id : '',
			orderByType: orderByType.value,
			sortType: sortType.value,
		}).then((res) => {
			// console.log(res, 'res');
			marketList.value = marketList.value.concat(res.result.records)
			console.log(marketList.value, 'marketList.values');
		})
	}
</script>
<template>
	<view class="navSearch">
		<u-navbar :placeholder="true" leftText="" :title="pageObj.name" auto-back>
			<template #right>
				<!-- <view class="" @click="searchGo">
					<u-icon name="search" size="30"></u-icon>
				</view> -->
			</template>
		</u-navbar>
	</view>
	<view style="height: 70rpx;width: 2rpx;background-color: #fff;"></view>
	<view class="tabs">
		<u-tabs :list="tabsList1" lineColor="#CB645E" :activeStyle="{
			fontSize:'36rpx',
			width:'150rpx',
			textAlign:'center',
		            color: '#CB645E',
		            fontWeight: 'bold',
		        }" :inactiveStyle="{
					fontSize:'36rpx',
					width:'150rpx',
					textAlign:'center',
		            color: '#606266',
		        }" @click="tabChange">
		</u-tabs>
	</view>
	<view class="screenContainer">
		<DaDropdown ref="DaDropdownRef" v-model:dropdownMenu="dropdownMenuList" themeColor="#CB645E" textColor="#BFBFBF"
			:duration="300" :fixedTop="false" :menuActiveText="false" @confirm="handleConfirm" @close="handleClose"
			@open="handleOpen">
		</DaDropdown>
	</view>
	<view class="marketList" v-if="userStoreInfo.userFlag==2">
		<gys-marketing-card :type="'marketingDetail'" :listData="marketList" :screenObj="pageObj"
			@delete="deleteWatch"></gys-marketing-card>
	</view>
	<view class="marketList" v-else>
		<marketing-card :type="'marketingDetail'" :listData="marketList" :screenObj="pageObj"></marketing-card>
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="marketList.length < 1">
		<u-empty mode="list">
		</u-empty>
	</view>
	<view class="gysBtn" v-if="userStoreInfo.userFlag==2" @click="routerLink('gysAddMarket')">
		发布营销
	</view>
</template>
<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.gysBtn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #CB645E;
		color: #fff;
		border-radius: 10rpx;
		position: fixed;
		bottom: 40rpx;
		left: 32rpx;
	}

	.navSearch {
		width: 100%;
		border-bottom: 1rpx solid #e7e7e7;
		height: 70rpx;
	}

	.tabs {
		width: 100%;
		height: 80rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.screenContainer {
		width: 100%;
		padding-top: 10rpx;
		background-color: #fff;
		display: flex;
		align-items: flex-end;
	}

	.marketList {
		width: 686rpx;
		margin: 0 auto;
		padding-bottom: 100rpx;
	}
</style>